<!-- 左侧列表式模板 -->
<template>
  <view class="template-body" :style="[{ height: contentHeight }]">
    <view class="top-nav">
      <firstNav
        :propsData="propsData"
        :dataList="catList"
        @changeNav="changeNav"
        ref="top"
      ></firstNav>
    </view>
    <view class="contentBox">
      <view class="aside">
        <leftAsideList
          :propsData="propsData"
          :dataList="secondCatList"
          @leftNavChange="changeSecondNav"
          ref="second"
        ></leftAsideList>
      </view>
      <scroll-view
        class="content"
        id="content"
        scroll-y
        @scrolltolower="scrollBottom"
        lower-threshold="50"
        :style="[
          {
            borderRadius:
              secondCatList.length && catId == secondCatList[0].id
                ? '0 0 0 0'
                : '20rpx 0 0 0',
          },
        ]"
        refresher-enabled
        :refresher-triggered="freshing"
        refresher-default-style="none"
        @refresherpulling="refresherpulling"
        @refresherrefresh="refresherrefresh"
        @refresherrestore="showRefresh = false"
      >
        <view class="refresh-box" v-if="showRefresh">
          <i class="iconfont icon-leftbutton-copy"></i>
          <text>向下继续{{ beforeText }}</text>
        </view>
        <view class="scrollBox" id="list">
          <section class="ad">
            <classifyAd :propsData="propsData"></classifyAd>
          </section>
          <section class="goods-section">
            <goodsList
              :propsData="propsData"
              :goodsList="goodsList"
            ></goodsList>
          </section>
          <!-- <nextCat
            :show="true"
            v-if="
              secondCatList.length &&
              catId != secondCatList[secondCatList.length - 1].id &&
              noMore &&
              goodsList.length
            "
            @nextCat="scrollChangeNav"
          ></nextCat> -->
        </view>
      </scroll-view>
    </view>
    <bottomToNext
      v-if="showBottomNext && scrollEnd"
      :nextText="nextText"
      @changeNext="scrollChangeNav"
    ></bottomToNext>
  </view>
</template>

<script>
import leftAsideList from "../components/leftAsideList/index.vue";
import classifyAd from "../components/classifyAd/index.vue";
import goodsList from "../components/goodsList/index.vue";
import firstNav from "../components/firstNav/index.vue";
import bottomToNext from "../components/bottomToNext/index.vue";
import nextCat from "../components/nextCat/index.vue";
export default {
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    catList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    contentHeight: {
      type: String,
      default: "",
    },
  },
  mixins: [],
  components: {
    leftAsideList,
    classifyAd,
    goodsList,
    firstNav,
    nextCat,
    bottomToNext,
  },
  data() {
    return {
      // 2级导航列表
      secondCatList: [],
      // 当前加载商品页数
      page: 1,
      // 当前商品是否加载玩
      noMore: false,
      // 商品列表
      goodsList: [],
      // 当前加载商品的导航id
      catId: "",
      // 滚动区域的盒子高度
      boxHeight: 0,
      // 手势起始位置
      goodStart: 0,
      // 手势结束位置
      goodEnd: 0,
      // 滑动盒子高度
      scrollHeight: 0,
      // 滑动条是否到底部
      scrollEnd: false,
      // 是否显示切换下一分类的按钮
      showBottomNext: false,
      // 下一分类名
      nextText: "",
      // 是否在下拉刷新
      freshing: false,
      showRefresh: false,
      beforeText: "",
    };
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    // 切换一级导航
    changeNav(e) {
      this.secondCatList = e.list;
      this.goodsList = [];
      this.page = 1;
      this.noMore = false;
      this.scrollEnd = false;
    },
    // 切换二级导航
    changeSecondNav(e) {
      this.goodsList = [];
      this.page = 1;
      this.noMore = false;
      this.scrollEnd = false;
      this.catId = e.id;
      this.getGoodsList(e.id);
    },
    // 上拉触底
    scrollBottom() {
      if (!this.noMore) {
        this.page++;
        this.getGoodsList(this.catId);
      } else {
        this.scrollEnd = true;
        let id = this.catId;
        if (id == this.secondCatList[this.secondCatList.length - 1].id) {
          return (this.showBottomNext = false);
        }
        let index = this.secondCatList.findIndex((item) => {
          return item.id == id;
        });
        this.nextText = this.secondCatList[index + 1].name;
        this.showBottomNext = true;
      }
    },
    // 获取商品列表
    getGoodsList(id) {
      this.$allrequest.classification
        .goodsList(
          {
            cat_id: id,
            page: this.page,
            limit: 10,
          },
          true
        )
        .then((res) => {
          if (res.code == 0) {
            this.goodsList = [...this.goodsList, ...res.data.list];
            if (this.goodsList.length >= res.data.row_count) {
              this.noMore = true;
            } else {
              this.noMore = false;
            }
            this.$nextTick(() => {
              this.getCurrentBoxHeight();
            });
          }
        });
    },
    getCurrentBoxHeight() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#list")
        .boundingClientRect((data) => {
          this.boxHeight = data.height;
        })
        .exec();
      query
        .select("#content")
        .boundingClientRect((data) => {
          this.scrollHeight = data.height;
        })
        .exec();
    },
    goodTouchstart(e) {
      let start = e.changedTouches[0].pageY;
      this.goodStart = start;
    },
    goodTouchend(e) {
      let end = e.changedTouches[0].pageY;
      this.goodEnd = end;
      if (this.goodStart - this.goodEnd >= 35) {
        if (this.boxHeight <= this.scrollHeight) {
          this.scrollChangeNav();
        } else {
          if (this.scrollEnd) {
            this.scrollChangeNav();
          }
        }
      }
      if (this.goodEnd - this.goodStart >= 35) {
        if (this.boxHeight <= this.scrollHeight) {
          this.scrollLastNav();
        } else {
          if (this.top <= 20) {
            this.scrollLastNav();
          }
        }
      }
    },
    // 切换下一二级分类
    scrollChangeNav() {
      if (this.noMore) {
        let id = this.catId;
        if (id == this.secondCatList[this.secondCatList.length - 1].id) {
          return;
        } else {
          let index = this.secondCatList.findIndex((item) => {
            return item.id == id;
          });
          this.$refs.second.handleTabItem(
            this.secondCatList[index + 1],
            index + 1
          );
          this.showBottomNext = false;
        }
      }
    },
    // 切换上一二级分类
    scrollLastNav() {
      let id = this.catId;
      if (id == this.secondCatList[0].id) {
        return;
      } else {
        let index = this.secondCatList.findIndex((item) => {
          return item.id == id;
        });
        this.$refs.second.handleTabItem(
          this.secondCatList[index - 1],
          index - 1
        );
        this.showBottomNext = false;
        setTimeout(() => {
          this.freshing = false;
        }, 200);
      }
    },
    refresherrefresh() {
      this.freshing = true;
      let id = this.catId;
      if (id == this.secondCatList[0].id) {
        setTimeout(() => {
          this.freshing = false;
        }, 200);
        return;
      }
      this.scrollLastNav();
    },
    refresherpulling() {
      let id = this.catId;
      if (id != this.secondCatList[0].id) {
        let index = this.secondCatList.findIndex((item) => {
          return item.id == id;
        });
        this.beforeText = this.secondCatList[index - 1].name;
        this.showRefresh = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.template-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  .top-nav {
    width: 100%;
    height: 168rpx;
    min-height: 168rpx;
  }
  .contentBox {
    padding-top: 12rpx;
    flex: auto;
    display: flex;
    height: 0;
    .aside {
      width: 202rpx;
      min-width: 202rpx;
      height: 100%;
      background-color: #f2f2f2;
    }
    .content {
      height: 100%;
      flex: auto;
      background: #ffffff;
      .goods-section {
        width: 100%;
        // height: 100%;
        padding: 0 32rpx;
      }
    }
  }
  .refresh-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24rpx 0;
    .iconfont {
      color: #f0250e;
      font-size: 38rpx;
    }
    text {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
    }
  }
}
</style>
